<template>
    <div>
        <p>1. 获取原生DOM元素</p>
        <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>
        <p>2. 获取组件对象 - 可调用组件内一切</p>
        <Demo ref="de"></Demo>
        <p>3. vue更新DOM是异步的</p>
        <p ref="myP">{{ count }}</p>
        <button @click="btn">点击count+1, 马上提取p标签内容</button>
    </div>
</template>
  
<script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
import Demo from './Child/Demo'
export default {
    mounted() {
        console.log(document.getElementById("h")); // h1
        console.log(this.$refs.myH); // h1

        let demoObj = this.$refs.de;
        demoObj.fn()
    },
    components: {
        Demo
    },
    data() {
        return {
            count: 0
        }
    },
    methods: {
        btn() {
            this.count++; // vue监测数据更新, 开启一个DOM更新队列(异步任务)
            //console.log(this.$refs.myP.innerHTML); // 0

            // 原因: Vue更新DOM异步
            // 解决: this.$nextTick()
            // 过程: DOM更新完会挨个触发$nextTick里的函数体
            this.$nextTick(() => {
                console.log(this.$refs.myP.innerHTML); // 1
            })
        }
    }
}
</script>
  
<style>

</style>